* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}


/* 顶栏 */

.header {
    width: 100%;
    margin: 0 auto;
    height: 50px;
}

.header-nav {
    width: 100%;
    height: 50px;
    /* background-color: red; */
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

.header-nav::after {
    content: "";
    display: block;
    clear: both;
}

.header-nav1,
.header-nav2 {
    float: left;
    padding: 15px 10px;
}

.header-nav-img {
    float: left;
}


/* .header-nav-img img {
    padding: 16px 6px 16px 10px;
    height: 100%;
    margin-top: 1px;
    width: 100px;
} */

.header-nav-list {
    float: left;
}

.header-nav-list ul::after {
    content: "";
    display: block;
    clear: both;
}

.header-nav-list li {
    float: left;
    display: block;
    margin-top: 5px;
    padding: 10px;
    font-size: 15px;
    text-align: center;
}

.header-nav-list li a {
    color: #262626;
}

.header-nav-list li a:hover {
    text-decoration: underline;
}

.header-nav-search {
    float: right;
    font-size: 15px;
}

.header-nav-search::after {
    content: "";
    display: block;
    clear: both;
}

.header-nav-search button {
    float: left;
    padding: 8px;
    margin-top: 5px;
    background-color: transparent;
    border-style: none;
}

.header-nav-search1 {
    float: left;
    padding: 8px;
    margin-top: 5px;
}

.header-nav-search1 a,
.header-nav-search2 a,
.header-nav-search3 a {
    color: #262626;
}

.header-nav-search2 {
    float: left;
    padding: 8px;
    margin-top: 5px;
}

.header-nav-search3 {
    float: left;
    padding: 8px;
    margin-top: 5px;
}


/* 中间栏 */

.wr {
    width: 100%;
    margin: 0 auto;
}


/* .row {
    width: 100%;
    margin: 0 auto;
} */

.row::after {
    content: "";
    display: block;
    clear: both;
}

.wr-col {
    width: 25%;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #fff;
}

.wr-col a>.col-img {
    margin: 25px 0;
}

.col-title {
    width: 100%;
    margin-top: 30px;
    padding-left: 10px;
    margin-bottom: 10px;
    font-size: 30px;
    font-weight: bolder;
}

.wr-col a>.col-img img {
    width: 100%;
}

.col-font h3 {
    color: black;
}

.col-font div {
    color: black;
}

.col-font a {
    display: block;
    color: #0067b8;
    margin-top: 8px;
    font-weight: bolder;
}


/* banner栏 */

.banner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: auto;
    margin-top: 25px;
    padding-left: 15px;
    padding-right: 15px;
}

.banner-img {
    font-size: 0;
}

.banner-img img {
    width: 100%;
}

.banner-font1 div {
    margin-top: 12px;
    margin-bottom: 12px;
}

.banner-font span {
    padding: 8px 12px;
    background-color: #000;
    color: #fff;
    font-weight: bolder;
}


/* banner1栏 */

.banner1 {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: auto;
    margin-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
}

.banner1-img {
    font-size: 0;
}

.banner1-img img {
    width: 100%;
}

.banner1-font1 div {
    margin-top: 12px;
    margin-bottom: 12px;
}

.banner1-font span {
    padding: 8px 12px;
    background-color: #000;
    color: #fff;
    font-weight: bolder;
}


/* 中间菜单栏 */

.nav-row {
    width: 1120px;
    margin: 20px auto;
}

.nav-row::after {
    content: "";
    display: block;
    clear: both;
}

.nav-col {
    float: left;
    width: 20%;
    padding-left: 20px;
    padding-right: 20px;
}

.nav-col-img img {
    width: 60px;
    margin: 12px auto;
    display: block;
}

.nav-col-font {
    margin-top: 10px;
    font-weight: 600;
    text-align: center;
}

.lianxi {
    width: 100%;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 50px;
    padding-left: 15px;
}

.lianxi span {
    vertical-align: bottom;
}

.lianxi a {
    width: 30px;
}

.lianxi a img {
    width: 30px;
    margin-left: 15px;
    vertical-align: bottom;
}


/* 底栏 */

.foot {
    width: 100%;
    margin: 0 auto;
    background-color: #f2f2f2;
}

.foot1 {
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
}

.foot1::after {
    content: "";
    display: block;
    clear: both;
}

.foot11,
.foot12,
.foot13,
.foot14,
.foot15,
.foot16 {
    float: left;
    width: 16.6%;
    height: auto;
}

.foot11 li,
.foot12 li,
.foot13 li,
.foot14 li,
.foot15 li,
.foot16 li {
    padding-top: 15px;
    font-size: 12px;
}

.foot11 li a,
.foot12 li a,
.foot13 li a,
.foot14 li a,
.foot15 li a,
.foot16 li a {
    color: #616161;
}

.foot11 li a:hover,
.foot12 li a:hover,
.foot13 li a:hover,
.foot14 li a:hover,
.foot15 li a:hover,
.foot16 li a:hover {
    color: #000;
    text-decoration: underline;
}

.foot11 ul li:nth-child(1),
.foot12 ul li:nth-child(1),
.foot13 ul li:nth-child(1),
.foot14 ul li:nth-child(1),
.foot15 ul li:nth-child(1),
.foot16 ul li:nth-child(1) {
    font-size: 20px;
}

.foot2 {
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 10px;
}

.foot2::after {
    content: "";
    display: block;
    clear: both;
}

.foot21 {
    padding-left: 12px;
    float: left;
    padding-bottom: 10px;
    font-size: 12px;
}

.foot21 a {
    color: #616161;
}

.foot22 {
    float: right;
    text-align: center;
}

.foot22 ul::after {
    content: "";
    display: block;
    clear: both;
}

.foot22 li {
    float: left;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 12px;
}

.foot1::after {
    content: "";
    display: block;
    clear: both;
}

.foot19 {
    /* width: 50%; */
    float: left;
    /* background-color: red; */
}

@media screen and (max-width: 320px) {
    .wr,
    .foot1 {
        width: 320px;
    }
}

@media screen and (max-width: 540px) {
    .wr-col {
        width: 100%;
    }
}

@media screen and (min-width: 540px) {
    .wr-col {
        width: 50%;
    }
    .foot19 {
        width: 100%;
    }
    .foot11,
    .foot12,
    .foot13,
    .foot14,
    .foot15,
    .foot16 {
        width: 33%;
    }
}

@media screen and (max-width: 960px) {
    .hiddle1 {
        display: none;
    }
}

@media screen and (min-width: 960px) {
    .hiddle {
        display: none;
    }
}

@media screen and (min-width: 1180px) {
    .wr,
    .foot1,
    .header-nav {
        width: 95%;
    }
    .wr-col {
        width: 25%;
    }
    .foot19 {
        width: 50%;
    }
    .foot11,
    .foot12,
    .foot13,
    .foot14,
    .foot15,
    .foot16 {
        width: 33.3%;
    }
}

@media screen and (max-width: 768px) {
    .banner-font {
        width: 100%;
    }
    .foot19 {
        width: 100%;
    }
    .foot11,
    .foot12,
    .foot13,
    .foot14,
    .foot15,
    .foot16 {
        width: 100%;
    }
    .banner-font1 {
        width: 100%;
        height: 320px;
        background-color: #e6e6e6;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }
    .banner1-font {
        width: 100%;
    }
    .banner1-font1 {
        width: 100%;
        height: 320px;
        background-color: #e6e6e6;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }
    .nav-col {
        width: 100%;
    }
    .nav-col::after {
        content: "";
        display: block;
        clear: both;
    }
    .nav-col-img img {
        width: 15px;
        height: auto;
        display: block;
        float: left;
    }
    .nav-col-font {
        float: left;
        /* margin-top: 10px; */
        text-align: center;
    }
}

@media screen and (min-width: 768px) {
    .banner-font {
        position: absolute;
        top: 120px;
        left: 80px;
    }
    .banner1-font1 {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }
    .banner1-font {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translate(-50%, 0);
    }
}

@media screen and (min-width: 860px) {
    .header-nav-img img {
        padding: 16px 6px 16px 10px;
        height: 100%;
        margin-top: 1px;
        width: 100px;
    }
    .header-nav1,
    .header-nav2 {
        display: none;
    }
}

@media screen and (max-width: 860px) {
    .header-nav-list,
    .header-nav-search1,
    .header-nav-search button {
        display: none;
    }
    .header-nav {
        position: relative;
    }
    .header-nav-img {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .header-nav-img img {
        padding: 16px 6px 16px 10px;
        height: 100%;
        margin-top: 1px;
        width: 100px;
    }
}